<template>
	<view class="change_number">
		<view class="change_number_content">
			<view class="top">
				<input type="text" @input="onInput" :value="tel" placeholder="请输入手机号" :disabled="disabled"/>
				<view class="button" @click="change_show">
					<span class="text" v-if="!show">获取验证码</span>
					<span class="num" v-if="show">（{{ count }}s）</span>
				</view>
			</view>
			<view class="bottom">
				<input type="text" placeholder="请输入验证码" v-model="check">
			</view>
			<view class="button1" @click="onClick">{{ type === 0 ? '下一步' : "完成" }}</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				disabled: true,					// 是否开启只读
				reg: /^(\d{3})\d{4}(\d{4})$/, 	// 隐藏手机号中间四位
				tel: '13024567890',				// 手机号
				check: '1234',					// 填写的验证码
				show: false,  					// 切换获取验证码和倒计时
				count: 60,						// 验证码倒计时
				timer: null,					// 定时器
				type: 0,						// 当前按钮状态 0：下一步  1：完成
				canShow: false,
			};
		},
		watch: {
			type(val) {
				if(val === 0) {
					this.disabled = true
				}else {
					this.disabled = false
				}
			},
		},
		computed: {},
		methods: {
			// 点击下一步或者完成按钮
			onClick() {		
				if(this.check === ''){
					uni.showToast({
						title: "请输入验证码",
						icon: 'none'
					})
				}
				if(this.check === '1234' && this.type === 0){
					this.tel = ''
					this.check = ''
					this.type = 1
					this.show = false
					this.count = 60
					this.timer = null
				}
				if(this.check === '1234' && this.type === 1) {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			onInput(e) {
				let val = e.detail.value
				if(/^[1][3-9][0-9]{9}$/.test(val)){
					this.canShow = true
				}
			},
			// 显示倒计时
			change_show() {
				let time_count = 60;
				console.log("this.timer",this.timer)
				if (this.timer) return;
				// console.log((this.tel))
				if (this.canShow) {
					this.count = time_count;
					this.show = true;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= time_count) {
							this.count--;
						} else {
							this.show = false;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}else {
					uni.showToast({
						title: "输入的手机号有误",
						icon: "none"
					})
				}
			}
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>
<style>
	page{
		background-color: #fff;
	}
</style>
